<!DOCTYPE >
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>jquery+div 弹出层(窗口) div 可拖拽移动位置</title>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
		<style type="text/css">
			.pop_box {
				z-index: 9999;
				display: none;
				position: absolute;
				background: #fff;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			.p_box_body {
				clear: both;
				padding: 5px 5px 5px 5px;
				height: 100%;
			}
			.p_h_title {
				float: left;
				height: 30px;
				line-height: 30px;
				width: 300px;
				font-size: 12px;
				font-weight: bold;
				color: #000;
				text-indent: 10px;
				background: #eee;
				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
			.p_h_x {
				float: right;
				text-align: center;
				height: 30px;
				width: 30px;
				line-height: 30px;
				color: #000;
				font-size: 12px;
				font-weight: bold;
				cursor: pointer;
			}
			.zhezhao {
				position: fixed;
				background: #000;
				opacity: 0.8;
				top: 0;
				width: 100%;
				height: 100%;
				display: none;
				left: 0;
			}
		</style>

	</head>

	<body>

		<a onclick="popupDiv('pop_div');" style="cursor:pointer;">点击弹出事件</a>

		<div id='pop_div' class="pop_box">
			<div class="p_h_title">我是弹出层标题<a class="p_h_x" onclick="hideDiv('pop_div');" title="关闭窗口">X</a></div>
			<div class="p_box_body" id="p_b_body" runat="server">
				我是内容！
			</div>
		</div>
		<div class="zhezhao" title="我是遮罩层"></div>

		<script language="javascript" type="text/javascript">
			function popupDiv(div_id) {
				var div_obj = $("#" + div_id);
				//窗口宽度,高度
				var winWidth = $(window).width();
				var winHeight = $(window).height();
				//弹出的div的宽度,高度
				var popHeight = div_obj.height();
				var popWidth = div_obj.width();
				div_obj.animate({
					opacity: "show",
					left: (winWidth - popWidth) / 2,
					top: (winHeight - popHeight) / 2,
					width: popWidth,
					height: popHeight
				}, 300);
				$(".zhezhao").animate({
					opacity: "show"
				}, 300);
			}

			function hideDiv(div_id) {
				$("#" + div_id).animate({
					opacity: "hide"
				}, 300);
				$(".zhezhao").animate({
					opacity: "hide"
				}, 300);
			}
			$(function() {
				$(".pop_box").easydrag();
				$(".pop_box").setHandler(".pop_box .p_head");
			});
		</script>
	</body>

</html>